<template>
  <div class="shortcut-key">
    <div class="align-con">
      <ul>
        <li @click.stop.capture="onSingleCenterAlign()"><el-tooltip class="item" effect="dark" content="单个水平居中对齐" placement="left"><i class="icon-horizontal-center-alignment"></i></el-tooltip></li>
        <li @click.stop.capture="onTopAlign()" class="icon-align-up" ></li>
        <li @click.stop.capture="onBottomAlign()" class="icon-align-below"></li>
        <li @click.stop.capture="onLeftAlign()" class="icon-align-left"></li>
        <li @click.stop.capture="onRightAlign()" class="icon-align-right"></li>
        <li @click.stop.capture="onHorizontalCenterAlign()"><el-tooltip class="item" effect="dark" content="横向中心对齐" placement="left"><i class="icon-horizontal-center-alignment"></i></el-tooltip></li>
        <li @click.stop.capture="onHorizontalCenterDistribute()"><el-tooltip class="item" effect="dark" content="横向分布对齐" placement="left"><i class="icon-horizontal-center-alignment"></i></el-tooltip></li>
        <li @click.stop.capture="onVerticalCenterAlign()"><el-tooltip class="item" effect="dark" content="纵向中心对齐" placement="left"><i class="icon-vertical-average-distribution"></i></el-tooltip></li>
        <li @click.stop.capture="onVerticalCenterDistribute()"><el-tooltip class="item" effect="dark" content="纵向分布对齐" placement="left"><i class="icon-vertical-average-distribution"></i></el-tooltip></li>
        <li @click.stop="onGroupComponent()"><el-tooltip class="item" effect="dark" content="打组组件" placement="left"><i class="icon-wall"></i></el-tooltip></li>
        <li @click.stop="onBreakupComponent()"><el-tooltip class="item" effect="dark" content="打散组合" placement="left"><i class="icon-qr-code"></i></el-tooltip></li>
      </ul>
    </div>
    <div v-if="isActiveKeyboard" class="keyboard-con">
      <h3>快捷键说明</h3>
      <ul>
        <li><span>删除</span>Delete</li>
        <li><span>复制</span>Ctrl + C</li>
        <li><span>多选</span>Shift</li>
        <li><span>回撤</span>Ctrl+Z/Ctrl+Shift+Z</li>
        <li><span>创建组合</span>Ctrl + G</li>
        <li><span>解散组合</span>Ctrl + Shift + G</li>
        <li><span>上对齐</span>Ctrl+up/Ctrl+Shift+up</li>
        <li><span>下对齐</span>Ctrl+down/Ctrl+Shift+down</li>
        <li><span>左对齐</span>Ctrl+left/Ctrl+Shift+left</li>
        <li><span>右对齐</span>Ctrl+right/Ctrl+Shift+right</li>
      </ul>
    </div>
    <div class="btn-keyboard" @click.stop="onKeyboard" :class="{active:isActiveKeyboard}">
      <i class="jy-icon-keyboard"></i>
      <p>快捷键</p>
    </div>
    <div v-if="siteAttrs.h5Type == H5_TYPE.mobile" class="btn-add-minus-con">
      <i class="jy-icon-plus btn-add" @click.stop="onAddScale" :class="{active:isActiveAdd}" @mouseover="onAddOver" @mouseout="onAddOut"></i>
      <i class="jy-icon-minus btn-minus" @click.stop="onMinusScale" :class="{active:isActiveMinus}" @mouseover="onMinusOver" @mouseout="onMinusOut"></i>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { ALIGN_TYPE } from '@/common/const'
import { H5_TYPE, MOBILE_WID_HEI } from '@/common/const-dif'
import { EventBus } from "@/store/index"
import { reactive } from 'vue'

export default {
  name: "ShortcutKey",
  components: {
  },
  setup () {
    const state =  reactive({
      isActiveKeyboard: false,
      isActiveAdd: false,
      isActiveMinus: false,
    })
    const state_ = {
      H5_TYPE: H5_TYPE,
    }
    _.merge(state, state_)
    return state
  },
  mounted(){
    if(this.siteAttrs.h5Type != H5_TYPE.mobile){
      setTimeout(() => {
        let scale = (window.innerWidth - MOBILE_WID_HEI.leftWidth - MOBILE_WID_HEI.rightWidth - 80) / this.page.attrs.width;
        if(scale > 1){
          scale = 1
        }
        this.updateSiteScale(scale);
      }, 1000)
    }
  },
  computed: {
    ...mapState("components", {
      siteStatus: state => state.siteStatus,
      siteAttrs: state => state.attrs,
      page: state => state.currentPage,
    })
  },
  methods:{
    ...mapActions({
      alignComponents: "components/alignComponents",
      singleAlignComponents: "components/singleAlignComponents",
      updateSiteScale: "components/updateSiteScale",
      isGroupCurrentComponent: "components/isGroupCurrentComponent",
    }),
    onTopAlign(){
      this.alignComponents(ALIGN_TYPE.top)
    },
    onBottomAlign(){
      this.alignComponents(ALIGN_TYPE.bottom)
    },
    onLeftAlign(){
      this.alignComponents(ALIGN_TYPE.left)
    },
    onRightAlign(){
      this.alignComponents(ALIGN_TYPE.right)
    },
    onSingleCenterAlign(){
      this.singleAlignComponents(ALIGN_TYPE.singleCenter)
    },
    onHorizontalCenterAlign(){
      this.alignComponents(ALIGN_TYPE.horizontalCenterAlign)
    },
    onHorizontalCenterDistribute(){
      this.alignComponents(ALIGN_TYPE.horizontalCenterDistribute)
    },
    onVerticalCenterAlign(){
      this.alignComponents(ALIGN_TYPE.verticalCenterAlign)
    },
    onVerticalCenterDistribute(){
      this.alignComponents(ALIGN_TYPE.verticalCenterDistribute)
    },
     onGroupComponent(){
      this.isGroupCurrentComponent(true);
    },
    onBreakupComponent(){
      this.isGroupCurrentComponent(false);
    },
    onMinusScale(){
      this.isActiveMinus = true;
      let scale = this.siteStatus.scale + 0.2;
      if(scale >= 2 ){
        scale = 2
      }
      this.updateSiteScale(scale);
      this.$nextTick( () => {
        EventBus.$emit("refreshScale");
      })
    },
    onAddOver(){
      this.isActiveAdd = true;
    },
    onAddOut(){
      this.isActiveAdd = false;
    },
    onMinusOver(){
      this.isActiveMinus = true;
    },
    onMinusOut(){
      this.isActiveMinus = false;
    },
    onAddScale(){
      this.isActiveAdd = true;
      let scale = this.siteStatus.scale - 0.2;
      if(scale <= 1 ){
        scale = 1
      }
      this.updateSiteScale(scale);
      this.$nextTick( () => {
        EventBus.$emit("refreshScale");
      })
    },
    onKeyboard(){
      this.isActiveKeyboard = !this.isActiveKeyboard
    },
  }
};
</script>
